var app = new Vue({
    el      : '#app',
    data    : {
        message   : 'Hello Vue!',
        isShow    : true,
        firstName : 'Oliver',
        lastName  : 'Quinn',
        fullName  : 'Oliver Quinn',
        firstName1: 'Oliver',
        lastName1 : 'Quinn',
        firstName2: 'Oliver',
        lastName2 : 'Quinn',
    },
    computed: {
        // 这个方法将作为 app.reverseMessage 的 getter
        // 在第一次访问 app.reverseMessage 时会执行一次之后将不在执行(缓存了数据), 若 app.reverseMessage 已经调用了一次则 app.message 一改变则 此方法会立即执行一次
        // 利用会缓存这一特性可以做一些与 methods 中不同的操作. 如在 computed 中的某个方法不含有 data 中的任意一个属性, 则这个方法的返回值会一直被缓存(没有触发改变的条件)
        reverseMessage: function () {
            console.log('excute reverseMessage');
            return this.message.split('').reverse().join('');
        },
        fullName1     : function () {
            console.log('excute fullName1');
            return this.firstName1 + ' ' + this.lastName1;
        },
        fullName2     : {
            // getter
            get: function () {
                console.log('excute fullName2`s getter');
                return this.firstName2 + ' ' + this.lastName2;
            },
            // setter
            set: function (newValue) {
                console.log('excute fullName2`s setter');
                var names = newValue.split(' ');
                this.firstName2 = names[0];
                this.lastName2 = names[names.length - 1];
            }
        }
    },
    watch   : {
        firstName: function (newValue) {
            console.log('excute watch firstName');
            this.fullName = newValue + ' ' + this.lastName;
        },
        lastName : function (newValue) {
            console.log('excute watch lastName');
            this.fullName = this.firstName + ' ' + newValue;
        }
    }
});